
<link rel="shortcut  icon" type="image/x-icon" href="img/icon/favicon.ico" media="screen">
<!-- 框架样式 -->
<link type="text/css" rel="stylesheet" href="${static}/fonts/font-icons.min.css">
<link type="text/css" rel="stylesheet" href="${static}/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/layui/css/layui.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/datatable/media/css/dataTables.bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/bootstrap-select/css/bootstrap-select.min.css?r=0.020456797551074324">
<link rel="stylesheet" type="text/css" href="${static}/plugin/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/radioCheckBox/src/pretty.min.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/materialdesignicons/css/materialdesignicons.min.css">
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<link type="text/css" rel="stylesheet" href="${static}/plugin/radioCheckBox/src/pretty.min.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/drag/drag.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/calendar/simple-calendar.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/weather/leoweather.css">
<link rel="stylesheet" type="text/css" href="${static}/plugin/imgupload/css/cropper.min.css?r=0.6207188189209538">
<link rel="stylesheet" type="text/css" href="${static}/plugin/imgupload/css/mui.min.css?r=0.9207463414125734">
<link type="text/css" rel="stylesheet" href="${static}/plugin/jquery-plugin-circliful-master/css/jquery.circliful.css">

<!-- 自定义样式 -->
<link type="text/css" rel="stylesheet" href="${static}/css/fream.css"> <!-- 顶部和侧边 -->
<link type="text/css" rel="stylesheet" href="${static}/css/iconfont.css">
<link type="text/css" rel="stylesheet" href="${static}/css/main.css?r=0.4389791385058335">
<link type="text/css" rel="stylesheet" href="${static}/css/nav.css">
<link rel="stylesheet" type="text/css" href="${static}/css/processHelper.css?r=0.07160859914374484">
<link type="text/css" rel="stylesheet" href="${static}/css/dtable.css">
<link type="text/css" rel="stylesheet" href="${static}/page/back/firstpage/css/firstpage.css"><!-- 主页css -->
<link type="text/css" rel="stylesheet" href="${static}/css/btn.css">
<link type="text/css" rel="stylesheet" href="${static}/page/back/device/css/icon.css">

<link type="text/css" rel="stylesheet" href="${static}/page/back/customprint/file/cpTemple.css">
<link type="text/css" rel="stylesheet" href="${static}/js/utils/listRight/listRight.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/checkBox/dist/checkbox.min.css">
<link type="text/css" rel="stylesheet" href="${static}/page/back/maintainRecord/swiper/swiper.min.css">
<link type="text/css" rel="stylesheet" href="${static}/js/utils/slider/slider.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/select2-develop/dist/css/select2.min.css">
<link type="text/css" rel="stylesheet" href="${static}/plugin/wdScrollTab/css/TabPanel.css?V4.1-03082101">
<link type="text/css" rel="stylesheet" href="${static}/css/adminlte.min.css">
<link type="text/css" rel="stylesheet" href="${static}/css/common.css">




<script type="text/javascript" src="${static}/js/jquery.min.js"></script>
<script type="text/javascript" src="${static}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${static}/plugin/layer/layer.js"></script>
<script type="text/javascript" src="${static}/plugin/layui/layui.js"></script>
<script type="text/javascript" src="${static}/plugin/countdown/countdown.js"></script>
<script type="text/javascript" src="${static}/js/i-jquery.js?r=85145"></script>
<script type="text/javascript" src="${static}/js/main.js?v=123"></script>
<script type="text/javascript" src="${static}/js/imgClickBig.js"></script>
<script type="text/javascript" src="${static}/js/jquery.cookie.min.js?v=123456"></script>
<script type="text/javascript" src="${static}/plugin/datatable/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="${static}/plugin/datatable/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="${static}/js/jquery.timeago.js"></script>
<script type="text/javascript" src="${static}/js/jquery.form.js"></script>
<script type="text/javascript" src="${static}/plugin/bootstrap-select/js/bootstrap-select.js"></script>
<script type="text/javascript" src="${static}/plugin/drag/drag.js"></script>
<script type="text/javascript" src="${static}/plugin/calendar/simple-calendar.js"></script>
<script type="text/javascript" src="${static}/plugin/weather/jquery.leoweather.min.js"></script>
<script type="text/javascript" src="${static}/js/material-decomposition.js?r=123sdf"></script>
<script type="text/javascript" src="${static}/js/processHelper.js?r=324242"></script>
<script type="text/javascript" src="${static}/js/checkGroup.js?r=85145"></script>
<script type="text/javascript" src="${static}/js/iDistpicker.js?r=85145"></script>
<script type="text/javascript" src="${static}/plugin/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${static}/plugin/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${static}/js/pmHelper.js"></script>
<script type="text/javascript" src="${static}/js/formUtil.js"></script>
<script type="text/javascript" src="${static}/js/layer-date-format.js"></script>
<script type="text/javascript" src="${static}/js/dateUtil.js"></script>
<script type="text/javascript" src="${static}/js/iUpload.js"></script>
<script type="text/javascript" src="${static}/plugin/eachrt4.1/echarts.js"></script>
<script type="text/javascript" src="${static}/plugin/jquery-plugin-circliful-master/js/jquery.circliful.js"></script>
<script type="text/javascript" src="${static}/plugin/utils/numberUtils.js"></script>
<script type="text/javascript" src="${static}/js/checkWindowClose.js"></script>
<script type="text/javascript" src="${static}/js/utils/common/fileUtils.js"></script>
<script type="text/javascript" src="${static}/js/utils/common/arrayUtils.js"></script>
<script type="text/javascript" src="${static}/js/utils/common/arrayUtils.js"></script>
<script type="text/javascript" src="${static}/js/utils/common/formUtil.js"></script>
<script type="text/javascript" src="${static}/js/utils/common/layer-tip.js"></script>

<script type="text/javascript" src="${static}/plugin/select2-develop/dist/js/select2.js"></script>
<script type="text/javascript" src="${static}/plugin/select2-develop/dist/js/pinyin.js"></script>

<!-- 树插件 -->
<link rel="stylesheet" href="${static}/plugin/ztree/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="${static}/plugin/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${static}/js/PullDownTreeUtil2.js"></script>
<script src="${static}/plugin/jsPlumb/js/jsplumb.js"></script>
<script src="${static}/plugin/jsPlumb/flowchart-util.js"></script>


<script  src="${static}/plugin/datatable/JSZip-2.5.0/jszip.min.js"></script>
<script  src="${static}/plugin/datatable/pdfmake-0.1.36/pdfmake.min.js"></script>
<script  src="${static}/plugin/datatable/Buttons-1.5.6/js/dataTables.buttons.js"></script>
<script  src="${static}/plugin/datatable/Buttons-1.5.6/js/buttons.flash.min.js"></script>
<script  src="${static}/plugin/datatable/Buttons-1.5.6/js/buttons.html5.js"></script>
<script  src="${static}/plugin/datatable/Buttons-1.5.6/js/buttons.print.js"></script>
<script  src="${static}/js/utils/table2excel/table2excel.js"></script>
<script  src="${static}/js/common.js"></script>

<link type="text/css" rel="stylesheet" href="${static}/page/back/maintenanceStaff/css/maintenanceStaff.css">
<link type="text/css" rel="stylesheet" href="${static}/page/back/device/css/icon.css">

<style>
    .fream-top-right > ul > li:hover > .margin0 {
        margin: -10px -4px 0px;
    }

    .border tbody tr td:nth-child(odd) {
        width: 150px;
    }

    .border tbody tr td:nth-child(even) {
        width: 200px;
    }

</style>
<body style="background-color: #EEF1F6;">
<div class="page-content detail-content page-content-main" style="min-height:700px">
    <form action="" method="post" id="addDcitDataForm" class="form-horizontal">
        <div class="fh-subtitle">设备信息</div>
        <table class="border">
            <tr>
                <td><span class="required-flag">*</span><span>字典类型</span></td>
                <td colspan="4" title="">
                    <input type="text" id="txtTreeSelect" class="form-control-gx" onkeyup="AutoMatch(this)">
                    <input type="hidden" id="parentId" value="" name="parentId" class="form-control-gx">
                </td>
            </tr>
            <tr>
                <td>字典编号</td>
                <td style="position: relative;">
                    <input type="text" class="form-control-gx"
                           name="dictValue" id="dictValue"/>
                </td>
                <td>字典名称</td>
                <td><input type="text" class="form-control-gx"
                           name="dictText" id="dictText"></td>
            </tr>
        </table>
        <div style="text-align:center;padding:50px;">
            <span class="model-btn" id="btn_confirm" onclick="submitDictData()" >确定</span>
        </div>
    </form>
</div>
<div id="menuContent" style="display:none;padding: 5px; max-height: 400px; position: absolute; border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255); z-index: 10000; overflow-y: scroll; top: 183.636px; left: 412.42px;">
    <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;">
    </ul>
</div>
</body>
</html>
<script type="text/javascript">
    var obj = '${treesdDictData}';
    var zNodesData = JSON.parse(obj);
    $(function () {
        $.fn.zTree.init($("#treeDemo"), setting, zNodesData);
        initEvent();
        hideMenu();
    })

    $('#menuContent').hover(
        function(){
            //鼠标在区域内

        },function(){
            //鼠标不在区域内
            hideMenu();
        }
     );

    var setting = {
        view: {
            selectedMulti: false, //是否允许多选
            showIcon: true,//设置 zTree 是否显示节点的图标。默认值：true
            showLine: true,//设置 zTree 是否显示节点之间的连线。默认值：true
            fontCss : {color:"#333"}
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            //zTree节点的点击事件
            onClick: onClick
        }
    };

    //点击某个节点 然后将该节点的名称赋值值文本框
    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //获得选中的节点
        var nodes = zTree.getSelectedNodes(),
            v = "";
        //根据id排序
        nodes.sort(function compare(a, b) { return a.id - b.id; });
        for (var i = 0, l = nodes.length; i < l; i++) {
            if(i!==0){
                v +=","+nodes[i].name ;
            }
            v +=nodes[i].name;
        }
        $('#txtTreeSelect').val(treeNode.name);
        $('#parentId').val(treeNode.id);
        //隐藏zTree
        hideMenu();
    }

    //显示树
    function showMenu() {
        var cityObj = $("#txtTreeSelect");
        var cityOffset = $("#txtTreeSelect").offset();
        $("#menuContent").css({ left: cityOffset.left + "px", top: cityOffset.top + cityObj.outerHeight() + "px" }).slideDown("fast");
        $("#menuContent").slideDown("fast");
    }

    //隐藏树
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
    }

    function initEvent(){
        //鼠标获得焦点的时候，显示所有的树
        $("#txtTreeSelect").focus(function(){
            showMenu();
        });
        //鼠标失去焦点的时候，隐藏
       /* $("#txtTreeSelect").blur(function(){
            hideMenu();
        });*/
    }

    //还原zTree的初始数据
    function InitialZtree() {
        $.fn.zTree.init($("#treeDemo"), setting, zNodesData);
    }

    ///根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
    function AutoMatch(txtObj) {
        if (txtObj.value.length > 0) {
            InitialZtree();
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
            //将找到的nodelist节点更新至Ztree内
            $.fn.zTree.init($("#treeDemo"), setting, nodeList);
            showMenu();
        } else {
            //隐藏树
            //hideMenu();
            InitialZtree();
        }
    }

    function submitDictData() {
        if($("#dictValue").val()==""){
            js.showMessage("字典编号不能为空！",null,"warning",1500);
            return;
        }
        if($("#txtTreeSelect").val()==""){
            js.showMessage("字典类型不能为空！",null,"warning",1500);
            return;
        }
        if($("#dictText").val()==""){
            js.showMessage("字典类型不能为空！",null,"warning",1500);
            return;
        }

        $.ajax({
            url : "insertDictData",
            type : "POST",
            datatype : "json",
            data :$("#addDcitDataForm").serialize(),
            success : function(data, stats) {
                if (data.success) {
                    js.showMessage(data.message,"","success",1500)
                    js.closeCurrentTabPage(function(contentWindow){
                        contentWindow.reload();
                    });
                } else {
                    js.showMessage(data.message,"","error",1500)
                }
            },
            error : function(data) {
                js.showMessage("请求异常！","","error",1500)
            }
        });

    }

</script>